<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
		<title>Toki Learning</title> 
		<meta name="description" content=""> 
		<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection"> 
		<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print">
		<!--[if lt IE 8]><link rel="stylesheet" href="/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
		<link rel="stylesheet" href="css/style2.css" type="text/css" media="screen">
		<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.13.custom.css" media="screen">
		<link rel="stylesheet" type="text/css" href="css/jquery.css" media="screen">
		<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/core.js"></script>
		<script type="text/javascript" src="js/widget.js"></script>
		<script type="text/javascript" src="js/mouse.js"></script>
		<script type="text/javascript" src="js/selectable.js"></script>	
		<script type="text/javascript">
			$(document).ready(function() {
				$("#selectable").selectable({
					stop: function() {
						var result = $( "#select-result" ).empty();
						$( ".ui-selected", this ).each(function() {
							var index = $( "#selectable li" ).index( this );
							var nama = ["Arsip Soal/" ,"Arsip Soal/Bilangan Prima","Arsip Soal/Jumlah Bilangan", "Etecetera/"];
							result.append(nama[index]);
						});
					}
				});
			});
		</script>
	</head> 
	<body>
		<div id="container">
			<div id="header">
				<div id="logo">
					<div id="usermenu" class="left">
						<div id="usernav">
								<ul>
                                                                    <li><b><a href="#">Setting</a></b></li>
                                                                </ul>
                                                                <div class="vertikal line2 left"></div>
                                                                <div class="vertikal line1 left"></div>
                                                                <ul>
                                                                    <li><b><a href="#">Inbox(0)</a></b></li>
                                                                </ul>
                                                                <div class="vertikal line2 left"></div>
                                                                <div class="vertikal line1 left"></div>
                                                                <ul>
                                                                    <li><b><a href="#">Logout</a></b></li>
								</ul>
                                                </div>
					</div>
				</div>
				<div id="menucontainer">
					<div id="pemisah">
					</div>
					<div id="mainmenu">
						<div id="menu" class="span-10">
							<div id="nav">
								<ul>
									<li><b><a href="#" class="navbar"> Problem Archives </a></b></li>
									<li><b><a href="#" class="navbar"> Contests </a></b></li>
									<li>
                                                                            <b><a href="#" class="navbar"> Training Gate </a></b>
                                                                            <ul>
                                                                                <li><b><a href="#" class="navbar">Chapter 1</a></b></li>
                                                                                <li><b><a href="#" class="navbar">Chapter 2</a></b></li>
                                                                                <li><b><a href="#" class="navbar">Chapter 3</a></b></li>
                                                                                <li><b><a href="#" class="navbar">Chapter 4</a></b></li>
                                                                                <li><b><a href="#" class="navbar">Chapter 5</a></b></li>
                                                                                <li><b><a href="#" class="navbar">Chapter 6</a></b></li>
                                                                                <li><b><a href="#" class="navbar">Chapter 7</a></b></li>
                                                                                <li><b><a href="#" class="navbar">Chapter 8</a></b></li>
                                                                            </ul>
                                                                        </li>
									<li><b><a href="#" class="navbar"> Learn </a></b></li>
								</ul>
							</div>
							<div class="horisontal line1"></div>
							<div class="horisontal line2"></div>
							<div id="nav2" class="right">
								<ul>
									<li><a href="#">My Friends</a></li>
									<li><a href="#">My Statistics</a></li>
									<li><a href="#">My Submissions</a></li>
									<li><a href="#">My Contests</a></li>
									<li><a href="#">My Profile</a></li>
								</ul>
							</div>
						</div>
						<div id="profile" class="left">
							<div class="vertikal line1 left"></div>
							<div class="vertikal line2 left"></div>
							<div id="nama" class="left">
								<b><a href="#">Petra Noviandi Barus</a></b>
							</div>
							<div id="profpic" class="left">
								<a href="#"><img src="image/user.jpg" alt="userpict"/></a>
							</div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
			</div>
			<div id="content" >
				<div id="isicontent">
					<div id="maincontent" class="left">
						<div id="explorer">
							<div id="isi" class="left">
								<div id="problemname">
									<b>Perubahan Minimal</b>
								</div>
								<div id="problemdesc">
									Porttitor phasellus, scelerisque nascetur. Tincidunt lorem nascetur cursus ultrices urna turpis scelerisque cras sagittis, ultricies, ut lorem nisi augue lectus, a sit non urna, placerat etiam!
								</div>
								<div id="feedback">
									Lokasi:/<span id="select-result"></span>
								</div>
								<div id="inside">
									<div id="select">
										<ol id="selectable">
											<li class="ui-widget-content">
                                                                                            <img src="image/folder.png" class="folder" alt="folder"><b> Arsip Soal</b>
                                                                                            <ol id="selectable2">
                                                                                                <li class="ui-widget-content">
                                                                                                    <img src="image/file.png" class="file" alt="file"><b> Bilangan Prima</b>                            
                                                                                                </li>
                                                                                                <li class="ui-widget-content">
                                                                                                    <img src="image/file.png" class="file" alt="file"><b> Jumlah Bilangan</b>
                                                                                                </li>
                                                                                            </ol>
                                                                                        </li>                                                                                    
											<li class="ui-widget-content"><img src="image/folder.png" class="folder" alt="folder"><b> Etcetera</b></li>
										</ol>
									</div>
									<div class="vertikal line5 left"></div>
									<div class="vertikal line4 left"></div>
								</div>
							</div>
						</div>
					</div>
					<div id="sidebar" class="left">
						<div class="sidebar_widget">
							<span class="head"><b>Popular Problems</b></span>
							<div class="listcontainer">
								<ol>
									<li><a href="#" class="listmenu">Jumlah Bilangan</a></li>
									<li><a href="#" class="listmenu">Perubahan Minimal</a></li>
									<li><a href="#" class="listmenu">Matrix</a></li>
									<li><a href="#" class="listmenu">Soal Lainnya</a></li>
									<li><a href="#" class="listmenu">Berfoto</a></li>
								</ol>
								<ol start="6">
									<li><a href="#" class="listmenu">Maling Motor</a></li>
									<li><a href="#" class="listmenu">Perubahan Minimal</a></li>
									<li><a href="#" class="listmenu">Matrix</a></li>
									<li><a href="#" class="listmenu">Soal Lainnya</a></li>
									<li><a href="#" class="listmenu">Berfoto</a></li>
								</ol>
							</div>
						</div>
						<div class="horisontal line3"></div>
						<div class="horisontal line4"></div>
						<div class="sidebar_widget">
							<span class="head"><b>Today's Popular Problems</b></span>
							<div class="listcontainer">
								<ol>
									<li><a href="#" class="listmenu">Jumlah Bilangan</a></li>
									<li><a href="#" class="listmenu">Perubahan Minimal</a></li>
									<li><a href="#" class="listmenu">Matrix</a></li>
									<li><a href="#" class="listmenu">Soal Lainnya</a></li>
									<li><a href="#" class="listmenu">Berfoto</a></li>
								</ol>
								<ol start="6">
									<li><a href="#" class="listmenu">Maling Motor</a></li>
									<li><a href="#" class="listmenu">Perubahan Minimal</a></li>
									<li><a href="#" class="listmenu">Matrix</a></li>
									<li><a href="#" class="listmenu">Soal Lainnya</a></li>
									<li><a href="#" class="listmenu">Berfoto</a></li>
								</ol>
							</div>
						</div>
						<div class="horisontal line3"></div>
						<div class="horisontal line4"></div>
						<div class="sidebar_widget">
							<span class="head"><b>Top Users</b></span>
							<div class="listcontainer">
								<ol>
									<li><a href="#" class="listmenu">Jumlah Bilangan</a></li>
									<li><a href="#" class="listmenu">Perubahan Minimal</a></li>
									<li><a href="#" class="listmenu">Matrix</a></li>
									<li><a href="#" class="listmenu">Soal Lainnya</a></li>
									<li><a href="#" class="listmenu">Berfoto</a></li>
								</ol>
								<ol start="6">
									<li><a href="#" class="listmenu">Maling Motor</a></li>
									<li><a href="#" class="listmenu">Perubahan Minimal</a></li>
									<li><a href="#" class="listmenu">Matrix</a></li>
									<li><a href="#" class="listmenu">Soal Lainnya</a></li>
									<li><a href="#" class="listmenu">Berfoto</a></li>
								</ol>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="footer">
				<div id="leftside">
					<div id="biasa">
						<a href="">Our Blog</a> |
						<a href="">About Us</a> |
						<a href="">Contact Us</a> |
					</div>
					<div id="follow">
						Follow our <a href="http://www.facebook.com/groups/166544345960/" onclick="window.open(this.href,'_blank;');return false;"><b>Facebook</b></a> and <a href="http://twitter.com/#/tokilearning" onclick="window.open(this.href,'_blank');return false;"><b>Twitter</b></a>
					</div>
				</div>
				<div id="copyright">
					Copyright of TOKI Learning 2011
				</div>
			</div>
		</div>
	</body>
</html>